<template>
  <div class="app-container main-flex">
    <el-card class="box-card">
      <div v-for="(o,key) in stepName" :key="key"  class="text item">
        <router-link :to="{path:o.path,query:{courseId: courseId,courseName:courseName}}">{{ o.name }}</router-link>
      </div>
    </el-card>
    <el-card style="width: 100%;">
      <router-view />
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="showCreateTitle"
      width="30%"
      :before-close="handleClose">
      <el-input
        ref="courseNameInput"
        placeholder="请输入要创建的课程名称"
        v-model="courseName"
        clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="requestTitle" :loading="submiting">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

import {createCourseName} from '@/api/course';
export default {
  data(){
    return {
      showCreateTitle:false,
      submiting:false,
      courseId:0,
      courseName:'',
      stepName:[
        {
          name:'课程属性',
          path:'/addCourse/ready/addTitle'
        },
        {
          name:'课程主讲人',
          path:'/addCourse/ready/addSpeaker'
        },
        {
          name: '课程知识点',
          path: '/addCourse/ready/addKnowPoint'
        },
        {
          name:'课程章节',
          path:'/addCourse/ready/addChapter'
        },
        {
          name:'课程时间规划',
          path:'/addCourse/ready/addTimePlan'
        },{
          name:'宣传信息',
          path:'/addCourse/ready/addPropaganda'
        },{
          name:'考核标准',
          path:'/addCourse/ready/addCheck'
        },{
          name:'学生管理',
          path:'/addCourse/ready/addStudent'
        }]
    }
  },
  mounted:function(){
    //判断是否是新创建课程
    if(this.$route.query.courseId == undefined){
      this.showCreateTitle = true;
      return false;
    }
    if(this.$route.query.courseId != undefined){
      this.showCreateTitle = false;
      this.courseId = this.$route.query.courseId;
      this.courseName = this.$route.query.courseName;
    }

  },
  methods:{
    handleClose(done) {
      if(this.submiting == false){
        this.$confirm('确认关闭？')
          .then(_ => {
            //done();
            this.$router.push({ path: '/' })
          })
          .catch(_ => {});
      }

    },
    requestTitle:function(){

      //提交数据
      let data = {
        courseName:this.courseName
      };
      if(this.courseName == undefined || this.courseName == ""){
        this.$router.go(0);
        return ;
      }
      this.submiting = true;
      createCourseName(data).then(response=>{
        this.submiting = false;
        const { code,data } = response;
        //console.log(data);
        if(code == 200){
          this.courseId = data.id;
          //完成提交之后跳转到添加属性页面
          this.$router.push({path:'/addCourse/ready/addTitle',query:{courseId:this.courseId,courseName:this.courseName}});
          this.showCreateTitle = false;
        }
      });


    }
  }
}
</script>

<style scoped>
.main-flex{
  display: flex;
  flex-direction: row;
}
.text {
  font-size: 14px;
}

.item {
  display: flex;
  height: 40px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.item a{
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: center;

}

.box-card {
  width: 200px;
  margin-right: 10px;
}
.router-link-active{
  background: #409EFF;
  color:#FFF;
  font-weight: bold;
}

</style>
